<!--无限极左侧菜单-->
<div class="left-menu-panel">
    <div class="layui-nav layui-nav-tree">
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">搜索器</a>
            <dl class="layui-nav-child">
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">申请中的发票</span>
                        <span class="layui-badge">50</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">已开出发票</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">收到款发票</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">部分退款发票</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">提成分配发票</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">已发放发票</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">退回发票</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">退款发票</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">审批驳回发票</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
                <dd>
                    <a href="javascript:;" layuimini-href="">
                        <i class="fa fa-th-large"></i>
                        <span class="layui-left-nav">所有发票[正常]</span>
                        <span class="layui-badge">0</span>
                    </a>
                </dd>
            </dl>
        </li>
    </div>
</div>
<div class="right-panel layuimini-page-anim">
    <form class="layui-form layui-user-from" action="">
        <div class="layui-row">
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">订单ID</label>
                    <div class="layui-input-block">
                        <input type="text" name="orderId" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">项目客户公司</label>
                    <div class="layui-input-block">
                        <input type="text" name="" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">科目</label>
                    <div class="layui-input-block">
                        <input type="text" name="invoiceItem" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>



            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">申请人</label>
                    <div class="layui-input-block">
                        <select name="">
                            <option value=""></option>
                            <option value="0">下拉框</option>
                            <option value="1">下拉框</option>
                            <option value="2">下拉框</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">发票状态</label>
                    <div class="layui-input-block">
                        <select name="">
                            <option value=""></option>
                            <option value="0">未提交</option>
                            <option value="1">已提交</option>
                            <option value="2">已过账</option>
                            <option value="2">已退回</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">候选人</label>
                    <div class="layui-input-block">
                        <select name="">
                            <option value=""></option>
                            <option value="0">下拉框</option>
                            <option value="1">下拉框</option>
                            <option value="2">下拉框</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">调整日期</label>
                    <div class="layui-input-block">
                        <div class="input-group">
                            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input">
                            <span class="input-group-addon">至</span>
                            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">过账日期</label>
                    <div class="layui-input-block">
                        <div class="input-group">
                            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input">
                            <span class="input-group-addon">至</span>
                            <input type="text" name="" placeholder="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-col-md3">
                <div class="layui-form-item">
                    <label class="layui-form-label">项目客户公司client.NO</label>
                    <div class="layui-input-block">
                        <input type="text" name="" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>




            <div class="layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-xs layui-bg-lightblue" lay-submit lay-filter="financeSearch">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-xs layui-btn-primary">清空</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="finance-table-modular" style="min-height: 800px">
        <table class="layui-hide" id="financeTable" lay-filter="financeTable" lay-skin="line"></table>
    </div>
</div>

<!-- 工具栏 -->
<script type="text/html" id="toolbarTemp">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-xs layui-btn-primary" lay-event="addBill">申请发票</button>
        <div class="layui-dropdown" lay-filter='moreFunction'>
            <button class="layui-btn layui-btn-xs layui-btn-primary layui-dropdown-toggle needCheck layui-btn-disabled"><i class="fa fa-th-large"></i> 批量操作</button>
            <div class="layui-dropdown-content">
                <div class="layui-dropdown-menu">
                    <li><a href="javascript:;" lay-event="deleteTableData">删除</a></li>
                </div>
            </div>
        </div>
    </div>
</script>
<!-- 项目、订单 -->
<script type="text/html" id="orderOrProject">
    {{#  if(d.batchFrom == 'project'){ }}
    <a href="javascript:;" layuimini-href="jobProject/toDetail/{{ d.projectName }}" class="color-blue">#{{ d.projectId }}</a><br>
    <a href="javascript:;" title="{{d.projectName}}" layuimini-href="jobProject/toDetail/{{ d.projectName }}" class="color-red">{{ d.projectName }}</a>
    {{#  } else { }}
    <a href="javascript:;" layuimini-href="jobOrder/toDetail/{{ d.orderId }}" class="color-blue">#{{ d.orderId }}</a><br>
    <a href="javascript:;" title="{{d.positionName}}" layuimini-href="jobOrder/toDetail/{{ d.orderId }}" class="color-red">{{ d.positionName }}</a>
    {{#  } }}
</script>
<!-- 附件 -->
<script type="text/html" id="enclosureTemp">
    {{#  layui.each(d, function(index, item){ }}
    <li class="layui-row">
        <div class="layui-col-md12">
            <div class="pull-left">
                <i class="fa fa-paperclip mr-5"></i>
                <a href="javascript:;" class="color-blue mr-5 ellipsis-l1" style="max-width: 300px">{{ item.originname }}</a>
            </div>
            <div class="pull-right">
                <span class="color-gray">{{ (item.filesize/1024).toFixed(1) }} KB</span>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="pull-left">上传者:{{ item.addedBy.name }}  {{item.dateAdded}}</div>
            <div class="pull-right">
                <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary" data-id="{{item.id}}">预览</a>
                <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary deleteFile" data-id="{{item.id}}">删除</a>
                <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary replaceFile" data-id="{{item.id}}">替换</a>
                <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary">下载</a>
            </div>
        </div>
    </li>
    {{#  }); }}
</script>
<!-- 操作 -->
<script type="text/html" id="operationTemp">
    <div class="layui-dropdown dropdown-right" lay-filter='operation'>
        <button class="layui-btn layui-btn-xs layui-btn-primary layui-dropdown-toggle"><i class="fa fa-align-justify"></i></button>
        <div class="layui-dropdown-content">
            <div class="layui-dropdown-menu">
                <li><a href="javascript:;" lay-event="editBill">编辑</a></li>
                <li><a href="javascript:;" lay-event="confirmBill">确认提交</a></li>
                <li><a href="javascript:;" lay-event="approveBill">审批过账</a></li>
                <li><a href="javascript:;" lay-event="backBill">退回</a></li>
                <li><a href="javascript:;" lay-event="deleteBill">删除</a></li>
            </div>
        </div>
    </div>
</script>
<script>
    layui.use(['form', 'table', 'miniPage', 'element', 'laydate', 'laytpl', 'xmSelect', 'utils', 'upload'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            xmSelect = layui.xmSelect,
            utils = layui.utils,
            element = layui.element,
            upload = layui.upload;

        form.render(); // 初始化表单


        // 数据快速查看
        var tableIns = table.render({
            elem: '#financeTable',
            url: 'jobInvoice/getInvoiceListView',
            method: 'post',
            autoSort: false,
            page: true,
            contentType: 'application/json',
            headers: {"token": localStorage.getItem("token")},
            request: {
                pageName: 'pageIndex',
                limitName: 'pageSize'
            },
            response: {
                statusCode: 200
            },
            parseData: function(res){
                return {
                    "code": res.code,
                    "msg": res.message,
                    "count": res.data.total,
                    "data": res.data.records
                };
            },
            toolbar: '#toolbarTemp',
            defaultToolbar: false,
            skin: 'line',
            text: {
                none: ''
            },
            cols: [
                [
                    {type: 'checkbox', fixed: "left"},
                    {field: 'id', title: '发票ID', align: 'center', width: 100, sort: true},
                    {field: 'billAmount', title: '发票金额', align: 'center', width: 150, sort: true},
                    {field: 'talentId', title: '候选人', width: 300, sort: true, templet: function (d) {
                            return '<div style="max-height: 40px; white-space: normal;" class="color-blue">'+ d.talentNameCn +'</div>'
                        }},
                    {field: 'invoiceStatus', title: '发票状态', align: 'center', width: 150, sort: true},
                    {field: 'clientName', title: '客户名称', width: 200, sort: true, templet: function (d) {
                            return '<a href="javascript:;" title="'+ d.clientName+'" layuimini-href="clnClient/toDetail/' + d.clientId + '" class="color-red">'+ d.clientName+'</a>';
                        }},
                    {field: 'clientId', title: '客户编号', align: 'center', width: 120, sort: true},
                    {field: '', title: '项目/订单', width: 200, templet: '#orderOrProject'},
                    {field: 'orderStatusString', title: '项目/订单状态', align: 'center', width: 150},
                    {field: 'guaranteeDate', title: '候选人入职日期', width: 200, sort: true},
                    /* {field: '', title: '寄出日期', width: 100, sort: true},
                    {field: '', title: '核销日期', width: 100, sort: true},
                    {field: '', title: '收款金额', width: 100, sort: true}, */
                    {field: 'createByEnglishName', title: '发票添加人', width: 100, sort: true},
                    {field: 'createTime', title: '添加日期', width: 100, sort: true},
                    {title: '操作', align: "center", fixed: "right", width: 60, templet: '#operationTemp'}
                ]
            ],
            done: function(res, curr, count){
                // 更多功能
                utils.dropdown({
                    el: '[lay-filter="moreFunction"]',
                    zIndex: 10000,
                    trigger: 'click'
                });
                // 操作
                $('[lay-filter="operation"]').each(function () {
                    var $this = $(this);
                    utils.dropdown({
                        el: $this,
                        zIndex: 10000,
                        trigger: 'click'
                    });
                });
            }
        });


        /**
         *  表单事件
         */

        //搜索
        form.on('submit(financeSearch)', function(data){
            tableIns.reload({
                //where: data.field,
                page: {
                    curr: 2
                }
            });
            return false;
        });

        //监听排序事件
        table.on('sort(financeTable)', function(obj){
            tableIns.reload({
                initSort: obj,
                where: {
                    pageSorts:[{'column': obj.field, 'asc': obj.type=='asc' ? true : false }]
                }
            });
        })

        //监听头部工具栏
        table.on('toolbar(financeTable)', function(obj){
            switch(obj.event){
                // 申请发票
                case 'addBill':
                    var content = miniPage.getHrefContent('jobInvoiceBatch/toAddBill');
                    if (content) {
                        layer.open({
                            title: '申请发票',
                            type: 1,
                            shade: 0.2,
                            area: ['100%', '90%'],
                            content: content,
                            btn: ['确认', '取消'],
                            btnAlign: 'c',
                            yes: function(index, layero){
                                layero.find('[lay-filter="billSub"]').click();

                            },
                            end: function() {
                                delete window.billId;
                            }
                        });
                    }
                    break;
                // 删除选中数据
                case 'deleteTableData':
                    var checkStatus = table.checkStatus('financeTable');
                    var arr = [];
                    checkStatus.data.forEach(function(item) {
                        arr.push(item.id)
                    });
                    layer.confirm('确定要删除吗？', {title: '信息', btn: ['确定', '删除']}, function(index){
                        utils.Ajax({
                            url: '',
                            dataType: 'json',
                            type: 'post',
                            data: {data: JSON.stringify(arr)},
                            success: function (response) {
                                tableIns.reload({
                                    where: data.field,
                                    page: {
                                        curr: 1
                                    }
                                });
                                layer.close(index);
                            }
                        });
                    });
                    break;
            }
        });

        //监听工具条
        table.on('tool(financeTable)', function (obj) {
            var data = obj.data;
            switch(obj.event){
                // 编辑
                case 'editBill':
                    window.billId = data.id;
                    var content = miniPage.getHrefContent('jobInvoiceBatch/toAddBill');
                    if (content) {
                        layer.open({
                            title: '申请发票',
                            type: 1,
                            shade: 0.2,
                            area: ['100%', '90%'],
                            content: content,
                            btn: ['确认', '取消'],
                            btnAlign: 'c',
                            yes: function(index, layero){
                                layero.find('[lay-filter="billSub"]').click();
                                //tableIns.reload();
                            },
                            end: function() {

                                delete window.billId;
                            }
                        });
                    }
                    break;
                // 确认提交
                case 'confirmBill':
                    layer.open({
                        title: '确认提交',
                        area: '300px',
                        type: 1,
                        shade: 0.2,
                        content: '<div class="layer-tips">确定要提交吗？</div>',
                        btn: ['确认', '取消'],
                        btnAlign: 'c',
                        yes: function(index, layero){
                            utils.Ajax({
                                url: '',
                                dataType: 'json',
                                type: 'post',
                                data: {id: data.id},
                                success: function (response) {
                                    tableIns.reload();
                                    layer.close(index);
                                }
                            });
                        }
                    });
                    break;
                // 审批过账
                case 'approveBill':
                    var content = miniPage.getHrefContent('page/finance/public/approveBill.html?id=' +  data.id);
                    if (content) {
                        layer.open({
                            title: '审批过账',
                            area: '600px',
                            type: 1,
                            shade: 0.2,
                            content: content,
                            btn: ['确认', '取消'],
                            btnAlign: 'c',
                            yes: function(index, layero){
                                layero.find('[lay-filter="saveBtn"]').click();
                                tableIns.reload();
                            },
                        });
                    }
                    break;
                // 退回
                case 'backBill':
                    var content = miniPage.getHrefContent('page/finance/public/backBill.html?id=' +  data.id);
                    if (content) {
                        layer.open({
                            title: '确认退回',
                            area: '600px',
                            type: 1,
                            shade: 0.2,
                            content: content,
                            btn: ['确认', '取消'],
                            btnAlign: 'c',
                            yes: function(index, layero){
                                layero.find('[lay-filter="saveBtn"]').click();
                                tableIns.reload();
                            },
                        });
                    }
                    break;
                // 删除
                case 'deleteBill':
                    // 只能删除未提交的账单和已退回的账单
                    layer.open({
                        title: '操作',
                        area: '300px',
                        type: 1,
                        shade: 0.2,
                        content: '<div class="layer-tips">确定要删除吗？</div>',
                        btn: ['确认', '取消'],
                        btnAlign: 'c',
                        yes: function(index, layero){
                            utils.Ajax({
                                url: 'api/finance/1_bill.json',
                                dataType: 'json',
                                type: 'post',
                                data: {id: data.id},
                                success: function (response) {
                                    tableIns.reload();
                                    layer.close(index);
                                }
                            });
                        }
                    });
                    break;
            }
        });

        //监听复选框
        table.on('checkbox(financeTable)', function(obj){
            var $needCheck = $('.layui-table-tool-temp').find('.needCheck');
            obj.checked ? $needCheck.removeClass('layui-btn-disabled') : $needCheck.addClass('layui-btn-disabled');
        });
    });
</script>
